<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sx" uri="/struts-dojo-tags"%>

<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/calendar.css" />

<style type="text/css">
<!--
    .row-top-line{
        border-top: 1px solid #000000;
    }
    .require{
    	font-color: red;
    }
-->
</style>

<script type="text/javascript" src="js/yui/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="js/yui/json/json-min.js"></script>
<script type="text/javascript" src="js/yui/element/element-min.js"></script>
<script type="text/javascript" src="js/yui/paginator/paginator-min.js"></script>
<script type="text/javascript" src="js/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="js/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="js/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="js/yui/container/container-min.js"></script>
<script type="text/javascript" src="js/yui/button/button-min.js"></script>
<script type="text/javascript" src="js/yui/event/event-min.js"></script>

<script type="text/javascript">

	var pnlLoading = new YAHOO.widget.Panel("pnlLoading",
	        {   width:"350px", height:"135px",
	            draggable: true,
	            fixedcenter: true,
	            modal: true,
	            context: ['anchorElement','bl','tr'],
	            close: true,
	            visible: false });
	pnlLoading.render(document.body);
	pnlLoading.hide();
    
    var pnlEditDetail = new YAHOO.widget.Panel("pnlEditDetail",
                {   width:"350px", height:"220px",
                    draggable: true,
                    fixedcenter: true,
                    modal: true,
                    context: ['anchorElement','bl','tr'],
                    close: true,
                    visible: false });
    pnlEditDetail.render(document.body);
    pnlEditDetail.hide();
    
    //var oElement = document.getElementById("elementid");
	function fnOpenEdit(e){
		pnlEditDetail.show();
	}
    YAHOO.util.Event.addListener(['btn1','btn2','btn3'], 'click', fnOpenEdit);
    
    var btnSave = new YAHOO.widget.Button("btnSave");
    btnSave.on("click", function(e) {
        var callback = {
            success : function(o) {
                var obj;
                try{
                    var jsonData = YAHOO.lang.JSON.parse(o.responseText);
                    obj = eval("("+ jsonData.object +")");
                    if(obj.status == 'Success'){
                    	pnlLoading.show();
                    	//alert(obj.shiftNo);
                    	window.location.href = "${pageContext.request.contextPath}/shiftControl_execute.action";
                    } else if(obj.status == 'Confirm'){
                    	pnlDialog.hide();
                    	pnlConfirm.show();
                    } else{
                    	pnlDialog.hide();
                    	document.getElementById("errorText").innerHTML = obj.errDesc;
                    }
                } catch(x){
                	pnlDialog.hide();
            	}
            },
            failure: function(o){ pnlDialog.hide(); }
        };
        var DOM = YAHOO.util.Dom;
        var form = DOM.get("frmDetail");
        YAHOO.util.Connect.setForm(form);
        var conn = YAHOO.util.Connect.asyncRequest("POST", "${pageContext.request.contextPath}/shiftControl_updateDetail.action", callback);
    }, this, true);
	
    var btnCancel = new YAHOO.widget.Button("btnCancel");
    btnCancel.on("click", function(e) {
    	pnlEditDetail.hide();
    	//window.location.href = "${pageContext.request.contextPath}/home.action";
    }, this, true);
    
</script>

<div id="pnlLoading" style="visibility: hidden; background-color: #ffffff;">
    <div class="hd">Please wait ...</div>
    <div class="bd" align="center">
    	<br>
        <img src="${pageContext.request.contextPath}/images/loading.gif">
    </div>
    <div id="statusDiv" class="ft">&nbsp;</div>
</div>

<div id="pnlEditDetail" style="visibility: hidden; background-color: #ffffff;">
    <div class="hd" align="left">Edit Shift Detail ...</div>
    <div class="bd" style="overflow:auto">
        <table width="300" cellspacing="0" align="center">
        <form id="frmDetail" action="#">
        <tr height="30">
            <td width="50" style="padding-right: 10px" align="right">No.</td>
        	<td width="100">
        		<input type='text' name='lineNumStr' value='' size='1' class='seqbox-inline' readonly>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Transaction</td>
        	<td>
        		<input type='text' name='transStr' size='13' class='textbox-inline'>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Description</td>
        	<td>
        		<input type='text' name='descStr' size='25' maxlength='255' class='textbox-inline'>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Date</td>
        	<td>
        		<input type="text" id="d1" name="dateStr" value="" size="7" maxlength="10" class="seqbox-inline">
				<img style="cursor:hand" src="images/calendar.gif"
					 onclick="popUpCalendar(this,document.getElementById('d1'),'dd/mm/yyyy',dObj,mObj,yObj,'right')">
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Type</td>
        	<td>
				<s:select name="inoutTypeStr" list="#{'IN':'IN', 'OUT':'OUT'}" value="IN" theme="simple"/>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">By User</td>
        	<td>Staff</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Cash In</td>
        	<td>
        		<input type='text' name='cashInStr' size='10' class='numbox-inline'>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Cash Out</td>
        	<td>
        		<input type='text' name='cashOutStr' size='10' class='numbox-inline'>
        	</td>
        </tr>
        <tr height="30">
            <td style="padding-right: 10px" align="right">Source</td>
        	<td>Manual</td>
        </tr>
        <tr>
            <td colspan="2" align="center" height="45px">
                <input type="button" id="btnSave" value=" Save ">
                &nbsp; &nbsp; &nbsp;
                <input type="button" id="btnCancel" value=" Cancel ">
            </td>
        </tr>
        </form>
        </table>
    </div>
    <div id="statusDiv" class="ft">&nbsp;</div>
</div>
